<template>
	<view class="list">
		<view class="list__left">
			<view class="list__item" v-for="(item,index) in leftList" :key="index" @tap="handleGoods(item.id)">
				<image v-if="index%2==0" :src="$wanlshop.oss(item.image, 125, 125)" class="list__item__p1"
					mode="aspectFill"></image>
				<image v-if="index%2==1" :src="$wanlshop.oss(item.image, 125, 125)" class="list__item__p2"
					mode="aspectFill"></image>
				<view class="list__item__info">
					<view class="list__item__name">
						{{item.title}}
					</view>
					<view class="u-flex u-flex-y-center">
						<view class="xl">
							限时限量
						</view>
				<!-- 		<view class="mj">
							满100减20
						</view> -->
					</view>
					<view class="u-flex u-flex-y-center" style="margin-top: 4rpx;">
						<view class="list__item__price">
							<text style="font-size: 20rpx;">￥</text>{{item.price}}
						</view>
						<view class="list__item__hp">
							<text>好评率{{ item.comment > 0 ? parseInt((item.praise / item.comment) * 100) : 0 }}%</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list__right">
			<view class="list__item" v-for="(item,index) in rightList" :key="index" @tap="handleGoods(item.id)">
				<image v-if="index%2==1" :src="$wanlshop.oss(item.image, 125, 125)" class="list__item__p1"
					mode="aspectFill"></image>
				<image v-if="index%2==0" :src="$wanlshop.oss(item.image, 125, 125)" class="list__item__p2"
					mode="aspectFill"></image>
				<view class="list__item__info">
					<view class="list__item__name">
						{{item.title}}
					</view>
					<view class="u-flex u-flex-y-center">
						<view class="xl">
							限时限量
						</view>
					<!-- 	<view class="mj">
							满100减20
						</view> -->
					</view>
					<view class="u-flex u-flex-y-center" style="margin-top: 4rpx;">
						<view class="list__item__price">
							<text style="font-size: 20rpx;">￥</text>{{item.price}}
						</view>
						<view class="list__item__hp">
							<text>好评率{{ item.comment > 0 ? parseInt((item.praise / item.comment) * 100) : 0 }}%</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'WanlPageLikes',
		props: {
			lower: {
				type: Number,
				default: 0
			},
			leftList: {
				type: Array,
				default: []
			},
			rightList: {
				type: Array,
				default: []
			},
			dataType: {
				type: String,
				default: 'goods'
			},
			pageData: {
				type: Object,
				default: function() {
					return {
						name: '猜你喜欢',
						type: 'likes',
						params: [],
						style: [],
						data: []
					};
				}
			},

		},
		data() {
			return {
				dataList: [], //数据
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'loading',
				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '疯狂加载中...',
					contentnomore: this.$getText('我是有底线的')
				},
				addTime: 180,

				tempList: [],
				children: []
			};
		},

		methods: {
			handleGoods(id) {
				console.log(id)
				if (this.dataType === 'goods') {
					this.onGoods(id);
				} else if (this.dataType === 'groups') {
					this.$wanlshop.to(`/pages/apps/groups/goods?id=${id}`);
				}
			}
		},
		watch: {
			lower(newVal, oldVal) {
				this.loadData('lower');
			}
		}
	};
</script>

<style lang="scss">
	.list {
		display: flex;
		justify-content: space-between;

		&__item {
			margin-bottom: 22rpx;
			width: 336rpx;
			padding: 2rpx;
			background-color: #fff;
			border-radius: 12rpx;

			&__p1 {
				width: 336rpx;
				height: 360rpx;
				border-radius: 12rpx 12rpx 0rpx 0rpx;
				overflow: hidden;
			}

			&__p2 {
				overflow: hidden;
				width: 336rpx;
				height: 300rpx;
				border-radius: 12rpx 12rpx 0rpx 0rpx;
			}

			&__info {
				padding: 12rpx 10rpx;
			}

			.xl {
				padding: 0 6rpx;
				display: flex;
				align-items: center;
				height: 30rpx;
				background: #FFF9E6;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				border: 1rpx solid #FFC400;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #FFC400;
				line-height: 32rpx;
			}

			.mj {
				padding: 0 6rpx;
				display: flex;
				align-items: center;
				height: 30rpx;
				background: #FFF0F4;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				border: 1rpx solid #EC5C7F;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #EC5C7F;
				margin-left: 6rpx;
				line-height: 32rpx;
			}

			&__name {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				margin-bottom: 12rpx;
				color: #333333;
			}

			&__price {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFC400;
			}

			&__hp {
				width: 100rpx;
				height: 30rpx;
				background: #F2F2F2;
				border-radius: 15rpx 15rpx 15rpx 15rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 18rpx;
				color: #999999;
				margin-left: 6rpx;
			}
		}
	}
</style>